<template>
  <div class="marker-hot">
    <div class="red-icon-box">
      <div class="red-icon">
        <div class="circle"></div>
      </div>
    </div>
    <!-- <div class="yellow-icon-box">
      <div class="yellow-icon">
        <div class="circle"></div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'marker-hot'
})
export default class markerHot extends Vue {}
</script>

<style lang="scss" scoped>
.marker-hot {
  // width: 100px;
  // height: 100px;
  .red-icon-box {
    position: relative;
    left: 100px;
    border-radius: 50%;
    // width: 100px;
    // height: 100px;
    // box-shadow: 水平偏移量  垂直偏移量 模糊距离 阴影大小 颜色 向内/向外（默认向外）
    box-shadow: 0px 0px 30px 30px red;
    .red-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
      .circle {
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
      }
    }
  }
  .yellow-icon-box {
    position: relative;
    border-radius: 50%;
    // width: 100px;
    // height: 100px;
    // box-shadow: 水平偏移量  垂直偏移量 模糊距离 阴影大小 颜色 向内/向外（默认向外）
    box-shadow: 0px 0px 30px 30px rgba(255, 255, 0, 0.8);
    .yellow-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid yellow;
      display: flex;
      align-items: center;
      justify-content: center;
      .circle {
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
      }
    }
  }
  // @keyframes icon_animation {
  //   10% {
  //     transform: scale(1);
  //   }
  //   100% {
  //     transform: scale(8);
  //   }
  // }
}
</style>
